<template>
  <lay-container fluid="true" class="menu-box">
    <lay-card>
      <lay-form style="margin-top: 10px">
        <lay-row>
          <lay-col :md="5">
            <lay-form-item label="菜单名称" label-width="80">
              <lay-input v-model="searchQuery.name" placeholder="请输入" size="sm" :allow-clear="true"
                style="width: 98%"></lay-input>
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label="菜单地址" label-width="80">
              <lay-input v-model="searchQuery.address" placeholder="请输入" size="sm" :allow-clear="true"
                style="width: 98%"></lay-input>
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label="权限标识" label-width="80">
              <lay-input v-model="searchQuery.identifying" placeholder="请输入" size="sm" :allow-clear="true"
                style="width: 98%"></lay-input>
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label-width="20">
              <lay-button style="margin-left: 20px" type="normal" size="sm" @click="toSearch">
                查询
              </lay-button>
              <lay-button size="sm" @click="toReset"> 重置 </lay-button>
            </lay-form-item>
          </lay-col>
        </lay-row>
      </lay-form>
    </lay-card>
    <!-- table -->
    <div class="table-box">
      <lay-table :height="`100%`" ref="tableRef6" :loading="loadingFlag" children-column-name="children"
        :columns="menuTableListKey" :data-source="menuTableList" :default-toolbar="true"
        :default-expand-all="defaultExpandAll6" :expand-index="1">
        <template #toolbar>
          <lay-button size="sm" @click="editLayerFunction('新建', null)" type="primary">
            新建
          </lay-button>
          <lay-button size="sm" @click="expandAll6(true)">展开全部</lay-button>
          <lay-button size="sm" @click="expandAll6(false)">折叠全部</lay-button>
        </template>
        <template #name="{ row }">
          <lay-icon :class="row.icon"></lay-icon> &nbsp;&nbsp;
          {{ row.name }}
        </template>
        <template #option="{ row }">
          <lay-button @click="editLayerFunction('新建', null)" size="xs" border="blue" border-style="dashed">
            添加
          </lay-button>
          <lay-button @click="editLayerFunction('修改', row)" size="xs" border="green" border-style="dashed">
            修改
          </lay-button>
          <lay-button @click="toRemove" size="xs" border="red" border-style="dashed">
            删除
          </lay-button>
        </template>
        <template #type="{ row }">
          <div v-show="row.type == 'M'">
            <lay-tag color="#165DFF" variant="light">目录</lay-tag>
          </div>
          <div v-show="row.type == 'C'">
            <lay-tag color="#2dc570" variant="light">菜单</lay-tag>
          </div>
          <div v-show="row.type == 'F'">
            <lay-tag color="#F5319D" variant="light">外链</lay-tag>
          </div>
        </template>
      </lay-table>
    </div>

    <lay-layer v-model="visible11" :title="title" :area="['700px', '370px']">
      <div style="padding: 20px">
        <lay-form :model="model11" ref="layFormRef11">
          <lay-row>
            <lay-col md="12">
              <lay-form-item label="菜单名称" prop="name">
                <lay-input v-model="model11.name" required></lay-input>
              </lay-form-item>
              <lay-form-item label="路由路径" prop="routePath">
                <lay-input v-model="model11.routePath"></lay-input>
              </lay-form-item>
              <lay-form-item label="组件路径" prop="compontPath">
                <lay-input v-model="model11.compontPath"></lay-input>
              </lay-form-item>
              <lay-form-item label="图标" prop="icon">
                <lay-input v-model="model11.icon"></lay-input>
              </lay-form-item>
            </lay-col>
            <lay-col md="12">
              <lay-form-item label="父级菜单" prop="parentId">
                <lay-cascader :options="optionsMenuSelect" v-model="model11.parentId" placeholder="请选择父级菜单"
                  :expandTrigger="'click'" :multiple="false"  :max="1"
                  :changeOnSelect="true"
                  :check-strictly="true" :lazy="false" allow-clear style="width:100%;"></lay-cascader>
              </lay-form-item>
              <lay-form-item label="排序" prop="sort">
                <lay-input-number style="width: 100%" v-model="model11.sort" position="right"></lay-input-number>
              </lay-form-item>
              <lay-form-item label="是否显示" prop="isShow">
                <lay-select v-model="model11.isShow" style="width: 100%">
                  <lay-select-option value="显示" label="显示"></lay-select-option>
                  <lay-select-option value="隐藏" label="隐藏"></lay-select-option>
                </lay-select>
              </lay-form-item>

              <lay-form-item label="类型" prop="type">
                <lay-select v-model="model11.type" style="width: 100%">
                  <lay-select-option value="F" label="外链"></lay-select-option>
                  <lay-select-option value="M" label="目录"></lay-select-option>
                  <lay-select-option value="C" label="菜单"></lay-select-option>
                </lay-select>
              </lay-form-item>

            </lay-col>
          </lay-row>
        </lay-form>
        <div style="width: 97%; text-align: right">
          <lay-button size="sm" type="primary" @click="toSubmit">保存</lay-button>
          <lay-button size="sm" @click="toCancel">取消</lay-button>
        </div>
      </div>
    </lay-layer>
  </lay-container>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { layer, LaySelectOption } from '@layui/layui-vue'
import { useUserStore } from "../../../store/user";
import { treeManager,queryTree ,insertOrUpdate} from '../../../api/module/menu-manag';
const searchQuery = ref({
  address: '',
  identifying: '',
  name: ''
})
const Uploadheaders = ref<any>(null)
//模块加载完成---就执行
onMounted(() => {
  // 执行表格初始化渲染
  queryDataByServerForLimit();
  // 初始胡设置Header 
  const userInfoStore = useUserStore();
  Uploadheaders.value = {
    token: userInfoStore.token,
    clientId: userInfoStore.clientId
  }
});


// 获取接口用户信息
const queryDataByServerForLimit = async () => {
  try {
    const dataCallBack = await treeManager(searchQuery.value);
    // 重置表格的数据
    const responBody = dataCallBack.data
    menuTableList.value = [];
    menuTableList.value = responBody;
    // page.total = responBody.totalNum
    // page.current = responBody.pageIndex
  } catch (error) {
    console.error('Error fetching data:', error);

  } finally {
    // 关闭数据加载渲染
    loadingFlag.value = false;
  }
}
// 菜单树形选择器
const optionsMenuSelect = ref([]);

function toReset() {
  searchQuery.value = {
    address: '',
    identifying: '',
    name: ''
  }
  // 刷新数据
  toSearch();
}
// 搜索
function toSearch() {
  setTimeout(() => {
    loadingFlag.value = true
    queryDataByServerForLimit();
  }, 1000)
}
const change = (page: any) => {
  loadingFlag.value = true
  setTimeout(() => {
    //
    loadingFlag.value = false
  }, 1000)
}
const page = reactive({ current: 1, limit: 10, total: 100 })
// 默认开启
const loadingFlag = ref(true)
const tableRef6 = ref()

const menuTableListKey = [
  {
    fixed: 'left',
    type: 'checkbox',
    title: '复选'
  },

  {
    title: '菜单名称',
    key: 'name',
    customSlot: 'name'
  },
  {
    title: '路由地址',
    key: 'routePath'
  },
  {
    title: '组件路径',
    key: 'compontPath'
  },
  {
    title: '排序',
    width: '120px',
    key: 'sort'
  },
  {
    title: '可见',
    key: 'isShow'
  },
  {
    title: '类型',
    key: 'type',
    customSlot: 'type'
  },
  {
    title: '操作',
    key: 'option',
    customSlot: 'option'
  }
]
const menuTableList = ref([{
  id: '10001',
  name: '工作空间',
  type: '目录',
  icon: 'layui-icon-home',
  age: 0,
  routePath: '/workspace',
  compontPath: '',
  isShow: '是'
}]);


const getCheckData6 = function () {
  layer.msg(tableRef6.value.getCheckData())
}

const defaultExpandAll6 = ref(false)

const expandAll6 = function (flag: any) {
  defaultExpandAll6.value = flag
}
const model11 = ref({
  name: '',
  type: '',
  sort: 0,
  icon: '',
  routePath: '',
  compontPath: '',
  isShow: '是',
  parentId: ''
})
const layFormRef11 = ref()
const visible11 = ref(false)

const title = ref('新增')

// 编辑框
const editLayerFunction = (text: any, row: any) => {
  title.value = text
  if (row != null) {
    let info = JSON.parse(JSON.stringify(row))
    model11.value = info
  } else {
    model11.value = {
      name: '',
      type: '',
      sort: 0,
      icon: '',
      routePath: '',
      compontPath: '',
      isShow: '是',
      parentId: ''
    }
  }
  optionsMenuSelectLoading(row);
  visible11.value = !visible11.value
}

const optionsMenuSelectLoading = async (row: any) => {

  try {
    let menuId = '';
    if (row) {
      menuId = row.id;
    }
    const responBody = await queryTree(menuId);
    // 重置表格的数据
    optionsMenuSelect.value = [];
    optionsMenuSelect.value = responBody.data.nextLayer;
    model11.value.parentId = responBody.data.currentLayer;
  } catch (error) {
    console.error('Error optionsDeptSelectLoading data:', error);
  }
}

const submit11 = function () {
  layFormRef11.value.validate((isValidate: any, model: any, errors: any) => {
    layer.open({
      type: 1,
      title: '表单提交结果',
      content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(
        model
      )} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
      shade: false,
      isHtmlFragment: true,
      btn: [
        {
          text: '确认',
          callback(index: number) {
            layer.close(index)
          }
        }
      ],
      area: '500px'
    })
  })
}
// 清除校验
const clearValidate11 = function () {
  layFormRef11.value.clearValidate()
}
// 重置表单
const reset11 = function () {
  layFormRef11.value.reset()
}
function toRemove() {
  layer.confirm('您将删除所有选中的数据？', {
    title: '提示',
    btn: [
      {
        text: '确定',
        callback: (id: any) => {
          layer.msg('您已成功删除')
          layer.close(id)
        }
      },
      {
        text: '取消',
        callback: (id: any) => {
          layer.msg('您已取消操作')
          layer.close(id)
        }
      }
    ]
  })
}
function toSubmit() {
  let sendBody = model11.value;
  if(sendBody.parentId!=''){
    sendBody.parentId = model11.value.parentId[0];
  }
  insertOrUpdate(sendBody).then(resp => {
    if (resp.success) {
      layer.msg('操作成功！', { icon: 1, time: 1000 })
      visible11.value = false;
      toSearch();
    } else {
      layer.msg('操作失败' + resp.msg, { icon: 2, time: 1000 })
    }
  }).catch(err => {
    console.log(err);
  })
}
function toCancel() {
  visible11.value = false
}
</script>

<style scoped>
.menu-box {
  width: calc(100vw - 220px);
  height: calc(100vh - 110px);
  margin-top: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.top-search {
  margin-top: 10px;
  padding: 10px;
  height: 40px;
  border-radius: 4px;
  background-color: #fff;
}

.table-box {
  margin-top: 10px;
  padding: 10px;
  height: 700px;
  width: 100%;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
}

.search-input {
  display: inline-block;
  width: 98%;
  margin-right: 10px;
}

.table-style {
  margin-top: 10px;
}

.isChecked {
  display: inline-block;
  background-color: #e8f1ff;
  color: red;
}
</style>